<template>
  <!-- 弹框-->
  <a-modal
    :title="auditStatus.status == false ? (auditStatus.middleApprove ? $t('all.autotext1824') : $t('all.autotext434')) : $t('all.autotext658')"
    :visible="visible"
    @cancel="clickCancel()"
    @ok="clickConfirm()"
    width="50%"
    :confirmLoading="confirmLoading"
  >
    <a-form-model
      v-if="auditStatus.status == false"
      ref="ruleForm"
      :rules="rules"
      :model="form"
      :wrapper-col="{ span: 24 }"
      labelAlign="left"
    >
      <a-form-model-item prop="cName">
        <a-input v-model="form.cName" type="textarea" />
      </a-form-model-item>
    </a-form-model>
    <a-descriptions v-if="auditStatus.status == true" :title="auditStatus.applyReason">
      <a-descriptions-item :label="$t('all.autotext1323')">{{ auditStatus.userName }}</a-descriptions-item>
      <a-descriptions-item :label="$t('all.autotext867')">{{ auditStatus.totalAmount | formatAmount }}</a-descriptions-item>
    </a-descriptions>
    <div class="mark" v-if="auditStatus.status == true">
      <div class="mark-title">{{ $t('all.autotext983') }}:</div>
      <a-input v-model="comment" type="textarea" :auto-size="{ minRows: 3, maxRows: 5 }"/>
    </div>
    <div class="upload-wrap">
      <a-upload
        accept=".pdf, .jpg, .jpeg, .png"
        :file-list="fileList"
        action="/api/common/upload"
        :multiple="true"
        :before-upload="beforeUpload"
        @change="handleChange"
      >
        <a-button type="primary" ghost icon="upload">{{ $t('all.autotext1324') }}</a-button>
      </a-upload>
    </div>
    <identityCheck
      ref="identityRef"
      :title="auditStatus.status ? $t('all.autotext1781') : $t('all.autotext1782')"
      @ok="handleOk"
    />
  </a-modal>
</template>
<script>
import identityCheck from './identityCheck'

export default {
  components: { identityCheck },
  props: {
    visible: {
      default: false,
      type: Boolean
    },
    auditStatus: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      confirmLoading: false,
      rules: {
        // 校验规则
        cName: [{ required: true, message: this.$t('all.autotext434') }]
      },
      confirmData: {},
      form: {},
      comment: '',
      fileList: []
    }
  },
  methods: {
    beforeUpload (file, fileList) {
      const list = fileList.slice(0, 5)
      if (list.some(item => item.uid === file.uid)) {
        const formatImg = /((gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i
        const formatPdf = /(pdf)$/i
        const isLt5M = file.size / 1024 / 1024 < 5

        if (!isLt5M) {
          this.$message.error(this.$t('all.autotext1784'))
          return false
        }
        if (formatImg.test(file.type) || formatPdf.test(file.type)) {
          return true
        } else {
          this.$message.error(this.$t('all.autotext293'))
          return false
        }
      } else {
        this.$message.error(this.$t('all.autotext1785'))
        return false
      }
    },
    handleChange ({ fileList }) {
      let list = fileList.filter(item => item.status)
      this.fileList = list.map(item => {
        return {
          ...item,
          url: this.$options.filters.dealImageUrl(item.response?.data)
        }
      })
      // fix过滤文件返回为undefined的情况
      this.fileList = this.fileList.filter(item => Object.prototype.toString.call(item) === '[object Object]')
    },
    clickCancel () {
      this.form = {}
      this.comment = ''
      this.fileList = []
      this.$emit('uploadModalCancel')
    },
    clickConfirm () {
      if (!this.auditStatus.status && (this.form.cName === null || this.form.cName === '' || this.form.cName === undefined)) {
        this.$message.error(this.$t('all.autotext1487'))
        return false
      }
      this.$refs.identityRef.open()
      this.confirmData = {
        ...this.auditStatus,
        refuseReason: this.form.cName,
        comment: this.comment,
        auditArray: this.fileList.map(item => {
          return {
            fileName: item.name,
            url: item.url
          }
        })
      }
    },
    handleOk () {
      this.comment = ''
      this.fileList = []
      this.$emit('uploadClickConfirm', this.confirmData)
    }
  }
}
</script>

<style lang="less" scoped>
.mark {
  .mark-title {
    font-weight: bold;
    margin-bottom: 6px;
  }
}
.upload-wrap {
  margin-top: 20px;
}
</style>
